<style type="text/css">
    body {
        position: relative;
        background: #E8E8E8 url({$style.bg_image}) 0 0 no-repeat;
        background-size: cover;
        overflow: hidden;
        padding-bottom: 0;
    }
    header {
        font-size: .8em;
    }
    .gh-gl {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        text-align: center;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .gh-gl-item {
        display: block;
        margin-bottom: .2em;
        padding-top: .5em;
        padding-bottom: .5em;
        background-color: rgba(255, 255, 255, .8);
    }
    .gh-tip {
        position: absolute;
        top: 0;
        left: 0;
    }
    .ellipsis {
        padding-top: 1px;
    }
    .swipe-container {
        overflow: hidden;
        visibility: hidden;
        position: relative;
        width: 100%;
    }
    .swipe-images {
        overflow: hidden;
        position: relative;
    }
    .swipe-images li {
        float: left;
        width: 100%;
        position: relative;
        text-align: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: #f5f5f5;
    }
    .swipe-bullets {
        position: absolute;
        z-index: 99;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
    }
    .swipe-bullets i {
        font-style: normal;
        font-size: 0;
        background-color: #ddd;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 5px;
        margin: 2px;
    }
    .swipe-bullets i.active {
        background-color: #fff;
    }
    .from-bar {
        position: inherit;
    }
    .goods-category {
        margin: 2%;
        padding: 0.8em;
        width: 96%;
        background: #fff;
        box-sizing: border-box;
    }
    .goods-category li {
        box-sizing: border-box;
        float: left;
        width: 25%;
        text-align: center;
        font-size: .8em;
    }
    .goods-category li img {
        width: 3em;
        height: 3em;
        border-radius: 50%;
    }
    .goods-category li p {
        height: 24px;
        line-height: 24px;
        margin-top: 8px;
    }
    .goods-lists {
        margin: 0 2%;
    }
    .goods-lists li {
        padding: 0.5em;
        background: #ffffff;
        margin-bottom: 0.8em;
        text-align: center;
        box-sizing: border-box;
        width: 49%;
        float: left;
    }
    .goods-lists li:nth-child(even) {
        margin-left: 2%;
    }
    .goods-lists li:nth-child(odd){
        clear: left;
    }
    .goods-lists li .goods-title {
        height: 1.8em;
        line-height: 1.8em;
        overflow: hidden;
        font-size: 1em;
    }
    .goods-lists li img {
        border: 0;
    }
    .goods-lists .goods-price {
        float: left;
        font-size: .8em;
        display: inline-block;
        padding: 0 3px;
        border-radius: 3px;
    }
    .goods-lists del{
        color: #999;
        font-size: 90%;
        display: inline-block;
    }
</style>

<div class="swipe-container" id="swipeSlide">
    <ul class="swipe-images">
        <volist name="goodsLists" id="v" offset="0" length="5">
            <li>
                <img src="{$v['images'][0]}">
            </li>
        </volist>
    </ul>
    <p class="swipe-bullets">
        <volist name="goodsLists" id="v" offset="0" length="5">
            <i <eq name="i" value="0">class="active"</eq>></i>
        </volist>
    </p>
</div>
<script src="__PUBLIC__/Static/js/swipe.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function() {
        var slide = $("#swipeSlide");
        var bullets = $(".swipe-bullets i");
        var len = bullets.size();
        var swipe = new Swipe(slide.get(0), {
            auto: 3000,
            callback: function(index) {
                for (var i = 0; i < len; i++) {
                    bullets.eq(i).removeClass('active');
                }
                bullets.eq(index).addClass('active');
            }
        });
    });
</script>

<header class="gh-tip flex-row from-bar">
    <div class="row-item">
        <eq name="user.subscribe" value="0">
            <notempty name="fromUser">
                <notempty name="fromUser.face">
                    <div class="gh-tip-face fl">
                        <img class="w100" src="{$fromUser.face}" alt="" style="width:100px">
                    </div>
                </notempty>
                <p class="ellipsis">来自 {$fromUser.nickname} 的推荐</p>
                <p class="ellipsis">{$config.unsubscribe_text|default="关注我们，获取更多优惠"}</p>
            </notempty>
            <else/>
            <notempty name="user">
                <notempty name="user.face">
                    <div class="gh-tip-face fl">
                        <img class="w100" src="{$user.face}" alt="">
                    </div>
                </notempty>
                <p class="ellipsis">{$user.nickname}，感谢您的关注</p>
                <p class="ellipsis">{$config.subscribed_text|default="购买后分享给朋友，获取分享积分"}</p>
            </notempty>
        </eq>
    </div>

    <if condition="!$user['subscribe']">
        <a href="{$config.subscribe_url}" class="btn btn-theme">关注我们</a>
        <else/>
        <a href="{:url(null, 'DisShop', 'my', 'sid='.$sid.'&qid='.$qid)}" class="btn btn-theme">个人中心</a>
    </if>
</header>

<div class="flex-row" id="goods-category-bar">
    <ul class="goods-category">
        <tag:disShopConfig id="vv">
            <li>
                <a href="{$vv.url}">
                    <img src="{$vv.icon}" />
                    <p>{$vv.name}</p>
                </a>
            </li>
        </tag:disShopConfig>
    </ul>
</div>
<if condition="$listSize eq 0">
<script type="text/javascript">
$(function(){
   $("#goods-category-bar").hide();
})
</script>
</if>

<div class="flex-row">
    <ul class="goods-lists">
        <volist name="goodsLists" id="v">
            <li>
                <a href="{$v.url}">
                    <img src="{$v['image_vertical']?$v['image_vertical']:$v['images'][0]}" />
                    <p class="goods-title">{$v.name}</p>
                    <p><span class="goods-price">微信价:￥{$v.price}</span></p>
                    <gt name='v.high_price' value="0"><p><span class="goods-price"><del>原价:{$v.high_price}</del></span></p></gt>
                </a>
            </li>
        </volist>
    </ul>
</div>